<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title|default('舆情监控系统') }}</title>
    <link rel="icon" href="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f4ca.png" type="image/png">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/additional_styles.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    {% block styles %}{% endblock %}
</head>
<body>
    <div id="app">
        <div class="dashboard-container">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <div class="logo">
                    <img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f4ca.png" alt="Logo" class="logo-img">
                    <span class="logo-text">舆情监控系统</span>
                </div>
                <nav class="nav-menu">
                    <ul>
                        <li><a href="{{ url_for('views.index') }}"><i class="fas fa-home"></i> 首页</a></li>
                        <li><a href="{{ url_for('views.dashboard') }}"><i class="fas fa-chart-line"></i> 仪表板</a></li>
                        <li><a href="{{ url_for('views.info_management') }}"><i class="fas fa-search"></i> 舆情信息管理</a></li>
                        <li><a href="{{ url_for('views.monitoring_plan') }}"><i class="fas fa-fire"></i> 舆情监管方案</a></li>
                        <li><a href="{{ url_for('views.content_analysis') }}"><i class="fas fa-chart-bar"></i> 舆情内容分析</a></li>
                        <li><a href="{{ url_for('views.alert_management') }}"><i class="fas fa-map-marker-alt"></i> 舆情预警管理</a></li>
                        <li><a href="{{ url_for('views.event_analysis') }}"><i class="fas fa-file-alt"></i> 舆情事件分析</a></li>
                        <li><a href="{{ url_for('views.settings') }}"><i class="fas fa-cog"></i> 系统设置</a></li>
                    </ul>
                </nav>
            </aside>

            <!-- 主内容区域 -->
            <main class="main-content">
                <!-- 顶部用户信息栏 -->
                <header class="top-bar">
                    <div class="breadcrumb">
                        <span>首页</span> / <span>{% block breadcrumb %}{% endblock %}</span>
                    </div>
                    <div class="user-info">
                        <span class="notification" data-tooltip="3条新通知">
                            <i class="material-icons">notifications</i>
                            <span class="badge">3</span>
                        </span>
                        <div class="user">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
                            <span>管理员</span>
                            <i class="material-icons">arrow_drop_down</i>
                            <div class="user-dropdown">
                                <a href="{{ url_for('views.profile') }}">
                                    <i class="material-icons">person</i>
                                    <span>个人资料</span>
                                </a>
                                <a href="{{ url_for('views.settings') }}">
                                    <i class="material-icons">settings</i>
                                    <span>系统设置</span>
                                </a>
                                <a href="#">
                                    <i class="material-icons">help</i>
                                    <span>帮助中心</span>
                                </a>
                                <a href="#" style="color: var(--danger-color);">
                                    <i class="material-icons">exit_to_app</i>
                                    <span>退出登录</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </header>

                {% block content %}{% endblock %}
            </main>
        </div>
    </div>

    <!-- 按顺序加载脚本 -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        // 确保 ElementUI 全局可用
        window.ElementUI = ElementUI;
    </script>
    <script src="{{ url_for('static', filename='js/mockData.js') }}"></script>
    <script src="{{ url_for('static', filename='js/store.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 等待所有依赖加载完成后初始化 Vue -->
    <script>
        // 确保 store 已加载
        window.addEventListener('load', function() {
            const app = new Vue({
                el: '#app',
                data() {
                    return {
                        user: window.store.state.user,
                        notifications: window.store.state.notifications,
                        currentPage: window.store.state.currentPage,
                        notificationDrawer: false,
                        loading: window.store.state.loading
                    }
                },
                created() {
                    this.initializeApp();
                },
                methods: {
                    async initializeApp() {
                        await this.fetchUserInfo();
                        await this.fetchNotifications();
                        this.setCurrentPage();
                    },
                    
                    async fetchUserInfo() {
                        const data = await window.store.fetchData('/api/user/info');
                        if (data) {
                            window.store.setUser(data);
                            this.user = data;
                        }
                    },
                    
                    async fetchNotifications() {
                        const data = await window.store.fetchData('/api/notifications');
                        if (data) {
                            window.store.setNotifications(data);
                            this.notifications = data;
                        }
                    },
                    
                    setCurrentPage() {
                        const path = window.location.pathname;
                        const page = path.split('/').pop() || 'dashboard';
                        window.store.setCurrentPage(page);
                        this.currentPage = page;
                    },
                    
                    handleCommand(command) {
                        switch(command) {
                            case 'profile':
                                window.location.href = "{{ url_for('views.profile') }}";
                                break;
                            case 'settings':
                                window.location.href = "{{ url_for('views.settings') }}";
                                break;
                            case 'logout':
                                this.handleLogout();
                                break;
                        }
                    },
                    
                    async handleLogout() {
                        const data = await window.store.fetchData('/api/auth/logout', { method: 'POST' });
                        if (data) {
                            window.store.clearStorage();
                            window.location.href = "{{ url_for('views.login') }}";
                        }
                    },
                    
                    showNotifications() {
                        this.notificationDrawer = true;
                    }
                }
            });

            // 将 Vue 实例暴露给全局
            window.app = app;
        });
    </script>

    {% block scripts %}{% endblock %}
</body>
</html> 